<template>
  <el-container style="height: 100vh;">
    <el-header>
      <el-row>
        <el-col :span="4">
          <img src="../../assets/logoicon.png" width="32px" />
        </el-col>
        <el-col :span="12">
          <el-menu
            :default-active="activeIndex"
            mode="horizontal"
            @select="handleSelect"
            class="menu-with-icons"
          >
            <!-- 循环生成菜单项 -->
            <br />
          </el-menu>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="200px" style="background-color: #f4f4f4;">
        <el-row>
          <el-col :span="24">
            <el-row style="display: flex; align-items: center; height: 40px;">
              <el-menu
                default-active="1-4-1"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                :collapse="isCollapse"
              >
                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                  </template>

                  <el-menu-item-group>
                    <el-menu-item @click="navigateToComponentA">订单查询</el-menu-item>
                    <el-menu-item @click="navigateToComponentB">物流查询</el-menu-item>
                    <el-menu-item @click="navigateToComponentC">售后查询</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div @click="toOutSide">
              <el-row
                style="display: flex; align-items: center; background-color: thistle; padding: 0 10px; height: 60px"
              >
                <span style="color: white; font-size: 12px;">
                  对话中 &nbsp;&nbsp;
                  <a style="color: red;">退出客服</a>
                  &nbsp;&nbsp;
                </span>
              </el-row>
            </div>
          </el-col>
        </el-row>

        <hr />

        <el-row>
          <div style="background-color:aquamarine;height:50px">
            <span style="margin: 0 auto;" @click="yeji">信息统计</span>
          </div>
        </el-row>
        <hr />

        <el-row>
          <div style="background-color:aquamarine;height:50px">
            <span style="margin: 0 auto;" @click="huihua">历史会话记录</span>
          </div>
        </el-row>
        <hr />
        
        <el-row>
          <div style="background-color:aquamarine;height:50px" @click="toAnswer">
            <span style="margin: 0 auto;">开始会话</span>
          </div>
        </el-row>
        <!-- <hr />

        <el-row>
          <div style="background-color:aquamarine;height:50px">
            <span style="margin: 0 auto;">当前会话</span>
          </div>
        </el-row>-->
      </el-aside>
      <router-view></router-view>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      stateKefu: "",
      isCollapse: true,
      formData: {
        merchantName: "",
        provinceCity: "",
        orderTime: [],
        orderNumber: "",
        orderStatus: "",
        productName: "",
        paymentStatus: "",
        userPhoneNumber: "",
        orderType: ""
      },
      merchantOptions: [
        { value: "option1", label: "选项一" },
        { value: "option2", label: "选项二" }
        // 更多选项...
      ],
      provinceCityOptions: [
        { value: "province1", label: "省份一" },
        { value: "city1", label: "城市一" }
        // 更多选项...
      ],
      orderStatusOptions: [
        { value: "status1", label: "状态一" }
        // 更多选项...
      ],
      paymentStatusOptions: [
        { value: "status1", label: "状态一" }
        // 更多选项...
      ],
      orderTypeOptions: [
        { value: "type1", label: "类型一" }
        // 更多选项...
      ],
      activeIndex: "1",
      menuItems: [
        { icon: require("../../assets/就绪.png"), description: "就绪" },
        {
          icon: require("../../assets/checkIn - 签入.png"),
          description: "签入"
        },
        { icon: require("../../assets/签出.png"), description: "签出" },
        { icon: require("../../assets/小休-休息.png"), description: "小休" },
        {
          icon: require("../../assets/整理态 [转换].png"),
          description: "返回会话"
        },
        { icon: require("../../assets/退出.png"), description: "退出" },
        {
          icon: require("../../assets/M_结束会话.png"),
          description: "结束会话"
        }
      ]
    };
  },
  methods: {
    toOutSide() {
      this.$router.push({ path: "/shouye" });
    },
    yeji() {
      this.$router.push({ path: "/yeji" });
    },
    huihua() {
      this.$router.push({ path: "/HuiHua" });
    },
    toAnswer() {
      this.$router.push({ path: "/answerQuery" });
    },
    handleMenuItemClick(index) {
      switch (index) {
        case 0:
          this.onOptionOneSelected1();
          break;
        case 1:
          this.onOptionOneSelected2();
          break;
        case 2:
          this.onOptionOneSelected3();
          break;
        case 3:
          this.onOptionOneSelected4();
          break;
        case 4:
          this.onOptionOneSelected5();
          break;
        case 5:
          this.onOptionOneSelected6();
          break;
        case 6:
          this.onOptionOneSelected7();
          break;
      }
    },
    onOptionOneSelected1() {
      this.stateKefu = "3";
      this.$message({
        type: "success",
        message: "准备就绪"
      });
    },
    onOptionOneSelected3() {},
    onOptionOneSelected7() {
      this.$confirm("是否结束会话并保存对话, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    onOptionOneSelected2() {
      this.$router.replace({ path: "/answerQuery" });
    },
    onOptionOneSelected6() {
      this.$confirm("是否退出?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$router.replace({ path: "/" });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出"
          });
        });
    },
    navigateToComponentA() {
      this.$router.push("/orderQuery");
    },
    navigateToComponentB() {
      this.$router.push("/logisticsQuery");
    },
    navigateToComponentC() {
      this.$router.push("/afterSaleQuery");
    },
    navigateToComponentD() {
      this.$router.push("/userQuery");
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<style scoped>
.menu-with-icons.el-menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* 去除下划线 */
}

.menu-item-with-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.icon-description {
  margin-top: -20px;
  font-size: 10px;
}

.menu-item-with-icon img {
  width: 20px;
  height: auto;
}

.el-header {
  background-color: #ffffff;
}

.el-aside {
  background-color: #f4f4f4;
}

.el-main {
  background-color: #ffffff;
}

.el-footer {
  background-color: #f4f4f4;
}
.label {
  font-weight: normal;
}
.value {
  font-weight: bold;
}
</style>